<template>
  <div class="detail-wrapper">
    <p style="font-size: 30px; margin-bottom: 5px; color: #414141">{{ trackInfoData[0].col1.title }} </p>
    <p style="font-size: 15px; margin-bottom: 5px; color: #414141">{{ trackInfoData[0].col1.en_name }} </p>
    <el-table
      :data="trackInfoData"
      stripe
      border
      :show-header="false"
      style="width: 100%;">
      <el-table-column
        prop="col1"
       >
        <template scope="scope">
          <span>
            <img :src="scope.row.col1.src" :alt="scope.row.col1.alt" v-if="scope.row.col1.src">
            <span v-else>{{ scope.row.col1 }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="col2"
        >
      </el-table-column>
    </el-table>
    <el-row style="margin-top: 10px;">
      <el-radio class="radio" v-model="score_type" label="score">详细分数</el-radio>
      <el-radio class="radio" v-model="score_type" label="count">详细数量</el-radio>
    </el-row>
    <el-table
      :data="score_table(score_type)"
      stripe
      border v-if="displayAdv"
      class="adv-table detail-table"
    >
      <el-table-column
        prop="type"
        label=""
        width="75"
      ></el-table-column>
      <el-table-column
        prop="lv.3"
        label="红"
        class="lv4"
        width="77"
      >
      </el-table-column>
      <el-table-column
        prop="lv.4"
        label="紫"
        class="lv5"
        width="77"
      >
      </el-table-column>
      <el-table-column
        prop="lv.5"
        label="Re"
        class="lv6"
      >
      </el-table-column>
    </el-table>
    <el-table
      :data="score_table(score_type)"
      stripe
      class="base-table detail-table"
      border v-else
      >
      <el-table-column
        prop="type"
        label=""
        width="80"
      ></el-table-column>
      <el-table-column
        prop="lv.0"
        label="蓝"
        width="70"
      >
      </el-table-column>
      <el-table-column
        prop="lv.1"
        label="绿"
        width="70"
      >
      </el-table-column>
      <el-table-column
        prop="lv.2"
        label="黄"
      >
      </el-table-column>
    </el-table>
  </div>

</template>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../style/color"
  @import "../style/base.css"
  /*scoped  语法只对当前template有效（引入组件则对其无效） */

  adv-table-lv4 = rgb(240, 187, 202);
  adv-table-lv5 = rgb(201, 169, 203);
  adv-table-lv6 = rgb(220, 206, 221);
  table-lv1 = rgb(211, 239, 254);
  table-lv2 = rgb(170, 232, 186);
  table-lv3 = rgb(249, 230, 170);

  .el-table__header
    width 30px;

  .detail-wrapper
    padding: 30px;
    margin-top 60px;

  .cell
    img
      margin 5px;
      width 100px;

  .el-table__body-wrapper
    /*overflow hidden;*/

  .detail-table
    margin 13px 0;

  .adv-table
    font-size 13px;
    text-align center;
    width 100%;
    overflow hidden;
    .cell
      text-align center;
      padding 0;
    .el-table__header .el-table_1_column_4 .cell
      background adv-table-lv4;
    .el-table__header .el-table_1_column_4
      background adv-table-lv4;
    .el-table__header .el-table_1_column_5 .cell
      background adv-table-lv5;
    .el-table__header .el-table_1_column_5
      background adv-table-lv5;
    .el-table__header .el-table_1_column_6 .cell
      background adv-table-lv6;
    .el-table__header .el-table_1_column_6
      background adv-table-lv6;

  .base-table
    text-align center;
    .cell
      text-align center;
    .el-table__header .el-table_1_column_4 .cell
      background table-lv1;
    .el-table__header .el-table_1_column_4
      background table-lv1;
    .el-table__header .el-table_1_column_5 .cell
      background table-lv2;
    .el-table__header .el-table_1_column_5
      background table-lv2;
    .el-table__header .el-table_1_column_6 .cell
      background table-lv3;
    .el-table__header .el-table_1_column_6
      background table-lv3;


</style>
<script>
  export default {
    props: ['track_data'],
    data() {
      return {
        displayAdv: true,
        score_type: 'score'
      }
    },
    computed: {
      trackInfoData() {
        return this.$store.getters.trackInfoData;
      },
    },
    created() {
      if (!this.trackInfoData[0].col1.title) {
        let nid = this.$route.query.nid;
        this.$store.dispatch('getNodeDetail', nid).then(res => {
//          this.$store.dispatch('getScoreDetail', res.field_mai_score[0].value).then(res => {
//            //console.log(this.trackScoreData);
//          });
        });
      }
    },
    activated() {
      setTimeout(() =>{
        window.scrollTo(0,0);
        setTimeout(() => {
          let height = document.getElementsByClassName('detail-wrapper')[0].getBoundingClientRect().bottom;
          this.$store.commit('SET_DETAIL_HEIGHT', height);
        }, 300);
      } , 100);
    },
    methods: {
      score_table(score_type) {
        return score_type == 'count' ? this.convertScoreToCount(this.$store.state.mailist.track_score_data) : this.$store.state.mailist.track_score_data;
      },
      convertScoreToCount(data) {
        let count_rt = JSON.parse(JSON.stringify(data));
        let convert = () => {
          let total = [0, 0, 0, 0, 0, 0];
          let getCounts = function () {
            return total;
          };
          let calc = function (type, value, index) {
            value = value.replace(',', '');
            let count = 0;
            switch (type){
              case 'break':
                count = value/2500;
                total[index] += count;
                return count;
              case 'hold':
                count = value/1000;
                total[index] += count;
                return count;
              case 'slide':
                count = value/1500;
                total[index] += count;
                return count;
              case 'tap':
                count = value/500;
                total[index] += count;
                return count;
            }
          };
          return {
            calc: calc,
            getCounts: getCounts
          }
        };
        let types = ['break', 'hold', 'slide', 'tap'];
        let map_index = 0;
        let convert_rs = '';
        let rs;
        let convert_fun = convert();

        for (let i = 1; i < 5; i ++) {
          map_index = 0;
          rs = count_rt[i].lv.map((item) => {
            convert_rs = convert_fun.calc(types[i - 1], item, map_index ++);
            if (convert_rs) {
              return convert_rs;
            }
            else {
              return '';
            }
          });
          count_rt[i].lv = rs;
        }
        count_rt[5].lv = convert_fun.getCounts();
        return count_rt;
      }
    }
  }
</script>